<template>
    <div class="page_bottom_box" id="page_bottom_box">
        <div class="page_contant_box">
            <div class="box_container">
                <div class="box_left">
                    <div>{{ ADDRESS }}</div>
                    <div>Editorial Office: {{ EDITEMAIL }}</div>
                    <div>{{ COPYRIGHT }}</div>
                </div>
                <div class="box_right">
                    <div class="box_right_warp">
                        <Warp></Warp>
                    </div>
                    <div class="box_right_logo">
                        <img src="../../assets/logo.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ADDRESS, EDITEMAIL, COPYRIGHT } from "./data"
import Warp from './warp.vue';
</script>

<style lang='less'>
.page_bottom_box {
    width: 100%;
    background-color: #801431;

    .box_container {
        display: flex;
        justify-content: space-between;
        padding: 40px 0;

        .box_left {
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
        }

        .box_right {
            display: flex;
            flex-direction: column;
            padding-top: 20px;

            .box_right_logo {
                display: flex;
                justify-content: center;

                img {
                    margin-top: 20px;
                    height: 100px;
                }
            }
        }
    }
}
</style>